import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import PageHeader from '@/components/PageHeader';

import { Card, Descriptions, Timeline } from 'antd';

import '@ant-design/compatible/assets/index.css';

const { Item } = Descriptions;
interface CooperationDetailProps extends FormComponentProps {
  dispatch: Dispatch;
  detailInfo: any;
  loading: boolean;
  location: { query: any };
}

@connect(({ cooperationCompanyDetail: { detailInfo } }: any) => ({ detailInfo }))

class CooperationDetailInfoElem extends Component<CooperationDetailProps> {
  componentDidMount() {
    const { location: { query } } = this.props;
    this.fetchDetailInfo(query.id);
  }

  componentDidUpdate(prevProps: any) {
    const {
      location: { query: { id } },
    } = this.props;
    if (prevProps.location.query.id !== id) {
      this.fetchDetailInfo(id);
    }
  }

  fetchDetailInfo = (id: number) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cooperationCompanyDetail/fetch',
      payload: { id, loadUser: 1 },
    });
  };

  renderLogsInfo = (detailInfo: any) => (
    <Timeline>
      <Timeline.Item style={{ paddingTop: 6 }}>
        最近操作人：{detailInfo.updateUserName}
      </Timeline.Item>
      <Timeline.Item>最近操作时间：{detailInfo.updateTime}</Timeline.Item>
      <Timeline.Item>创建人：{detailInfo.createUserName}</Timeline.Item>
      <Timeline.Item>创建时间：{detailInfo.createTime}</Timeline.Item>
    </Timeline>
  );

  render() {
    const { detailInfo } = this.props;

    const content = detailInfo.content ? JSON.parse(JSON.stringify(detailInfo.content)) : {};
    return (
      <Fragment>
        <PageHeader />

        <Card
          bordered={false}
          title="详情信息"
          className="paddingB20"
        >
          <Descriptions bordered size="small">
            {detailInfo.pcId !== 6 && (
              <Item label="ID">{detailInfo.id}</Item>
            )}
            <Item label="快递公司">{detailInfo.pcName}</Item>
            <Item label="类型">{detailInfo.typeName}</Item>
            {detailInfo.type === 1 && (
              <Item label="物流中心/小区">{detailInfo.logisName}</Item>
            )}
            <Item label="网点编码">{detailInfo.code}</Item>
            {detailInfo.pcId !== 6 && (
              <Item label="状态">{detailInfo.statusName}</Item>
            )}
            {detailInfo.pcId !== 6 && (
              <Item label="网点联系人">{detailInfo.contact || '--'}</Item>
            )}
            {detailInfo.type === 1 && detailInfo.pcId !== 6 && (
              <Item label="学校/小区">{detailInfo.gardenName || '--'}</Item>
            )}
            {detailInfo.pcId !== 6 && (
              <Item label="网点联系人电话">{detailInfo.phone || '--'}</Item>
            )}
            {detailInfo.type === 1 && detailInfo.pcId !== 6 && (
              <Item label="物流中心分区">{detailInfo.regionName || '--'}</Item>
            )}
            {detailInfo.pcId !== 6 && (
              <>
                <Item label="第三方审核状态">{detailInfo.auditStateName}</Item>
                <Item label="网点服务电话">{detailInfo.servicePhone || '--'}</Item>
                <Item label="省市区">{detailInfo.pareaName}{detailInfo.careaName}{detailInfo.dareaName}</Item>
                <Item label="经度">{detailInfo.longitude}</Item>
                <Item label="纬度">{detailInfo.latitude}</Item>
                <Item label="地址信息">{detailInfo.address}</Item>
              </>
            )}
          </Descriptions>
          {detailInfo.pcId === 6 && (
            <Descriptions
              bordered
              size="small"
              title="京东系统信息"
              className="marginB12 marginT24"
            >
              <Item label="合作方站点编号">{content.partner_code}</Item>
              <Item label="合作方站点名称">{content.name}</Item>
              <Item label="物流中心联系人">{detailInfo.contact}</Item>
              <Item label="合作方账号">{content.account}</Item>
              <Item label="合作方密码">{content.password}</Item>
              <Item label="物流中心联系人号码">{detailInfo.phone}</Item>
              <Item label="状态">{detailInfo.statusName}</Item>
              <Item label="第三方验证">{detailInfo.auditStateName}</Item>
              <Item label="替代码同步结果">{detailInfo.id}</Item>
            </Descriptions>
          )}
        </Card>

        <Card bordered={false} title="日志信息">
          <Descriptions>{this.renderLogsInfo(detailInfo)}</Descriptions>
        </Card>
      </Fragment>
    );
  }
}

export default Form.create<CooperationDetailProps>()(CooperationDetailInfoElem);
